<template>
	<view class="ske-content" v-if="loading">
		<view v-if="model == 'line'" class="line">
			<view class="line-item" v-for="item in rows" :key="item">
				<ske-line :height="height" :width="width"></ske-line>
			</view>
		</view>
		<view v-if="model == 'rect'" class="rect">
			<view class="rect-item" v-for="item in rows" :key="item">
				<ske-line :height="height" :width="width"></ske-line>
			</view>
		</view>
		<view v-if="model == 'card'" class="card">
			<view class="card-img">
				<ske-line :height="rectObject.height" :width="rectObject.width" :round="rectObject.round"></ske-line>
			</view>
			<view class="card-item" v-for="item in rows" :key="item" style="display: flex;justify-content: center;">
				<ske-line :height="height" :width="width"></ske-line>
			</view>
		</view>
		<view v-if="model == 'chat'" class="chat">
			<view class="chat-img">
				<ske-line :height="rectObject.height" :width="rectObject.width" :round="rectObject.round"></ske-line>
			</view>
			<view class="chat-right">
				<view class="chat-item" v-for="item in rows" :key="item">
					<ske-line :height="height" :width="width"></ske-line>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import { mapState, mapMutations, mapGetters } from 'vuex';
	import skeLine from './line.vue';
	export default {
		components:{
			skeLine
		},
		//属性
		props: {
			loading: {
				type: Boolean,
				default: true,
			},
			width:{
				type: [Number,String],
				default: 300,
			},
			height: {
				type: Number,
				default: 60,
			},
			rows: {
				type: Number,
				default: 1,
			},
			model: {
				type: String,
				default: "rect", //line ,rect,card,chat,
			},
			rectObject:{
				type: Object,
				default(){
					return {
						height: 200,
						width:200,
						round:100,
					}
				},
			},
		},
	}
	
</script>
<style lang="scss" scoped>
	.rect{
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		justify-content: space-between;
		&-item{
			margin-right: 20rpx;
			&:last-of-type{
				margin-right: 0;
			}
		}
	}
	.card{
		&-img{
			display: flex;
			justify-content: center;
			margin: 20rpx 0;
		}
	}
	.chat{
		display: flex;
		flex-direction: row;
		&-img{
			margin-right: 20rpx;
		}
		&-right{
			flex: 1;
		}
	}
</style>